<template>
    <el-dialog :visible.sync="visible" width="700px" :close-on-click-modal="false" :show-close="false" :title="null"
        custom-class="knowledge-dialog" @close="handleClose">
        <template #title></template> <!-- 空掉原始 header -->
        <div class="dialog-content">
            <div class="dialog-header">
                <span class="dialog-title">
                    📖创建新知识库</span>
            </div>
            <div>
                <div style="display: flex;">
                    <div class="dialog-icon">
                        <img src="@/assets/images/knowledge/knowledge-icon.png" alt="icon" />
                    </div>
                    <div class="dialog-form">
                        <el-form ref="form" :model="form" :rules="rules" label-position="top" class="form-body">
                            <el-form-item label="知识库名称" prop="name">
                                <el-input v-model="form.name" placeholder="输入知识库名称"
                                    prefix-icon="el-icon-collection-tag" />
                            </el-form-item>

                            <el-form-item label="知识库描述" prop="description">
                                <el-input type="textarea" v-model="form.description" :rows="4" maxlength="500"
                                    show-word-limit placeholder="描述这个知识库的用途和内容..." />
                            </el-form-item>

                        </el-form>

                        <!-- 操作按钮 -->
                        <div class="dialog-footer">
                            <el-button @click="handleClose">取消</el-button>
                            <el-button type="primary" @click="handleSubmit"
                                style="background-color: #165dff;">确认</el-button>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'KnowledgeCreateModal',
    props: {
        visible: {
            type: Boolean,
            required: true
        }
    },
    data() {
        return {
            form: {
                name: '',
                description: ''
            },
            rules: {
                name: [{ required: true, message: '请输入知识库名称', trigger: 'blur' }],
                description: [{ max: 500, message: '最多输入500字', trigger: 'blur' }]
            },
            activeNames: []
        }
    },
    methods: {
        handleSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.$emit('submit', { ...this.form })
                    // this.handleClose()
                }
            })
        },
        handleClose() {
            this.$emit('update:visible', false)
            this.$refs.form.resetFields()
        }
    }
}
</script>

<style scoped>
::v-deep .el-dialog__header {
    margin: 0xp;
    padding: 0px;
    height: 0px;
}

::v-deep .el-dialog__body {
    padding: 0px;
    margin: 0px;
}

.knowledge-dialog {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    /* 高端卡片感 */
    padding: 0;
}

.dialog-content {
    /* display: flex; */
    padding: 0px;
    margin: 0px;
    background: #fff;
}

/* 左侧图标 */
.dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%
}

.dialog-icon img {
    width: 100px;
    height: 100px;
    border-radius: 16px;
}

/* 右侧表单 */
.dialog-form {
    width: 70%;
    padding: 24px;
}

.dialog-header {
    height: 100px;
    background-color: #2a6dff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dialog-title {
    font-size: 23px;
    font-weight: bold;
    color: #333;
    padding-left: 20px;
}

.close-btn {
    font-size: 18px;
    cursor: pointer;
    color: #999;
}

.form-body ::v-deep .el-form-item {
    margin-bottom: 18px;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.dialog-icon-wrapper {
    margin-top: 7%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #1890ff, #409eff);
    min-height: 100%;
    /* padding-top: 30%; */
}
</style>
